import {createRouter, createWebHashHistory} from 'vue-router'

// 1. Define route components.
// These can be imported from other files
import News from "../components/News.vue";
import NotFound from "../components/NotFound.vue";
import Home from "../components/Home.vue";
import Article from "../components/Article.vue";
import Films from "../components/Films.vue";
import User from "../components/User.vue";
import Row from "../components/User/Row.vue";
import Col from "../components/User/Col.vue";
import Page from "../components/Page.vue";
import ShopMain from "../components/Shop/ShopMain.vue";
import ShopTop from "../components/Shop/ShopTop.vue";
import ShopFooter from "../components/Shop/ShopFooter.vue";


// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
    {path: '/', component: Home},
    // 动态路由
    {
        name: 'news',
        path: '/news/:id', component: News
    },
    {path: '/article/:id(\\d+)', component: Article},
    // + 至少有一个 * 可以省略
    // ? 不可重复
    {path: '/films/:id*', component: Films},
    // {path: '/about', component: About},

    // 正则匹配路由
    {path: '/:path(.*)', component: NotFound},
    {
        path: '/user',
        component: User,
        children: [
            {
                path: 'row',
                component: Row,
            },
            {
                path: 'col',
                component: Col,
            }
        ]
    },
    {
        path: '/page',
        component: Page
    },
    {
        path: "/shop",
        // 起别名
        alias: ['/test_shop', '/shop2'],
        // 多个 加s
        components: {
            default: ShopMain,
            ShopTop: ShopTop,
            ShopFooter: ShopFooter
        }
    },
    {
        path: "/mall",
        // 重定向
        // 1. 直接写路径
        // redirect:'/shop',
        // 2. 对象方式
        // redirect:{
        //     path:'/shop'
        // },
        // 3. 函数方式
        redirect: (to) => {
            return {
                path: '/shop'
            }
        }
    }
]

// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = createRouter({
    // 4. Provide the history implementation to use. We are using the hash history for simplicity here.
    history: createWebHashHistory(),
    routes // short for `routes: routes`
})

export default router;

// // 5. Create and mount the root instance.
// const app = Vue.createApp({})
// // Make sure to _use_ the router instance to make the
// // whole app router-aware.
// app.use(router)
//
// app.mount('#app')

// Now the app has started!